<template>
	<view class="wrap">
		<u-form-item label="选择排名" label-width="180">
			<js-select
				v-model="selectMonthName"
				:items="this.title"
				itemLabel="name"
				itemValue="value"
				:label-value="selectTitle"
				@label-input="importType = $event"
				@confirm="GetSelectTitleValue(arguments)"
			></js-select>
		</u-form-item>
		<u-form-item label="选择年度" label-width="180">
			<js-select
				v-model="selectYear"
				:items="this.Year"
				itemLabel="name"
				itemValue="value"
				:label-value="selectYear"
				@label-input="selectYear = $event"
				@confirm="GetSelectYear(arguments)"
			></js-select>
		</u-form-item>
		<u-form-item :label="this.selectName" label-width="180">
			<js-select
				v-model="selectMonthName"
				:items="this.Month"
				itemLabel="name"
				itemValue="value"
				:label-value="selectMonthName"
				@label-input="selectMonthName = $event"
				@confirm="GetSelectMonth(arguments)"
			></js-select>
		</u-form-item>

		<u-form-item label="选择指标" label-width="180" v-if="this.switch == 1">
			<js-select
				v-model="leftParam"
				:items="this.leftParamObj"
				itemLabel="name"
				itemValue="value"
				:label-value="leftParam"
				@label-input="leftParam = $event"
				@confirm="GetSelectLeftParam(arguments)"
			></js-select>
		</u-form-item>
		<u-form-item label="选择指标123" label-width="180" v-if="this.switch == 2">
			<js-select :items="this.leftParamObj1" itemLabel="name" itemValue="value"></js-select>
		</u-form-item>
		<view class="container-wrap"><echarts ref="echarts" :option="option" canvasId="echarts"></echarts></view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			selectName: '选择季度',
			selectYear: '1',
			selectMonth: '3',
			selectMonthName: '第一季度',
			selectTitle: '经济运行考核排名',
			importType: '1',
			leftParam: '',
			option: {},
			Year: [],
			Month: [],
			title: [{ name: '经济运行考核排名', value: 1 }, { name: '经济指标增速排名', value: 2 }, { name: '经济指标绝对数排名', value: 3 }],
			leftParamObj: [],
			leftParamObj1: [],
			switch: 1,
			monthName: ['第一', '第二', '第三', '第四']
		};
	},
	created() {
		uni.setNavigationBarTitle({
			title: '经济指标'
		});
		this.GetYear();
		this.GetMonth();
		this.GetleftParam();
	},
	methods: {
		GetYear() {
			var date = new Date().getFullYear();
			this.selectYear = date;
			for (var index = 0; index < date - 2022 + 1; index++) {
				this.Year.push({ name: 2022 + index, value: 2022 + index });
			}
		},
		GetMonth() {
			for (var index = 0; index < 5; index++) {
				this.Month.push({ name: this.monthName[index - 1] + '季度', value: index * 3 });
			}
			this.Month = this.Month.splice(1, 13);
		},
		GetSelectYear(val) {
			this.selectYear = val[0];

			this.GetleftParam();
		},
		GetSelectMonth(val) {
			this.selectMonthName = val[1];
			this.selectMonth = val[0];
			console.log(this.selectMonth);
			this.GetleftParam();
		},
		GetSelectTitleValue(val) {
			this.importType = val[0];
			if (val[0] == 1) {
				this.selectMonthName = '第一季度';
				this.selectName = '选择季度';
				this.selectMonth='3'
				this.Month = [];
				for (var index = 0; index < 5; index++) {
					this.Month.push({ name: this.monthName[index - 1] + '季度', value: index });
				}
				this.Month = this.Month.splice(1, 13);
				this.GetleftParam();
			}
			if (val[0] == 2) {
				this.selectName = '选择月份';
				this.selectMonthName = '1月份';
				this.selectMonth='1'
				this.Month = [];
				for (var index = 0; index < 13; index++) {
					this.Month.push({ name: index + '月份', value: index });
				}
				this.Month = this.Month.splice(1, 13);
				this.GetleftParam();
			}
			if (val[0] == 3) {
				this.selectName = '选择月份';
				this.selectMonthName = '1月份';
				this.selectMonth='1'
				this.Month = [];
				for (var index = 0; index < 13; index++) {
					this.Month.push({ name: index + '月份', value: index });
				}
				this.Month = this.Month.splice(1, 13);
				this.GetleftParam();
			}
		},
		GetleftParam() {
			this.leftParamObj = [];
			this.leftParam = '';
			this.$u.api
				.getleftParam({
					selectYear: this.selectYear,
					selectMonth: this.selectMonth,
					importType: this.importType
				})
				.then(res => {
					if (res.stringList && res.stringList.length > 0) {
						res.stringList.map((item, index) => {
							this.leftParamObj.push({ name: item, value: item });
						});
						this.leftParam = res.stringList[0];
						this.getInformation();
					} else {
						for (var index = 0; index < 1; index++) {
							this.leftParamObj.push({ name: '', value: '' });
						}
						this.getInformation();
					}
				});
		},
		GetSelectLeftParam(val) {
			this.leftParam = val[0];
			this.getInformation();
		},
		getInformation() {
			this.$u.api
				.getinformation({
					selectYear: this.selectYear,
					selectMonth: this.selectMonth,
					importType: this.importType,
					leftParam: this.leftParam
				})
				.then(res => {
					if (res.area) {
						var a = res.area.reverse();
						var p = res.point.reverse();
						var r = res.rank.reverse();
					}

					var n = this.importType;
					this.option = {
						tooltip: {
							trigger: 'axis',
							axisPointer: {
								// 坐标轴指示器，坐标轴触发有效
								type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
							},
							formatter: function(v) {
								var tip = '';
								if (n == '1') {
									tip += '全省排名:' + r[v[0].dataIndex] + '\n' + '得分:' + v[0].value;
								}

								if (n == '2') {
									tip += '位次:' + r[v[0].dataIndex] + '\n' + '增长%：' + v[0].value;
								}

								if (n == '3') {
									tip += '位次:' + r[v[0].dataIndex] + '\n' + '占全省%:' + r[v[0].dataIndex] + '\n' + '绝对数:' + v[0].value;
								}
								return tip;
							},
							confine: true
						},
						color: ['#16ceb9'],
						legend: {
							data: [],
							show: false
						},
						grid: {
							left: 10,
							right: 10,
							bottom: 15,
							top: 40,
							containLabel: true
						},
						xAxis: [
							{
								type: 'value',
								axisLine: {
									lineStyle: {
										color: '#999'
									}
								},
								axisLabel: {
									color: '#666'
								},
								show: false
							}
						],
						yAxis: [
							{
								type: 'category',
								axisTick: {
									show: false
								},
								data: a,
								axisLine: {
									lineStyle: {
										color: '#999'
									}
								},
								axisLabel: {
									color: '#666'
								},
								// 设置坐标轴标签颜色
								axisLabel: {
									textStyle: {
										color: '#515A6E',
										fontFamily: 'Microsoft YaHei',
										fontWeight: 400
									},
									formatter: function(name) {
										return name.length > 6 ? name.slice(0, 6) + '...' : name;
									}
								}
							}
						],
						series: [
							{
								name: '',
								type: 'bar',
								label: {
									normal: {
										show: false,
										position: 'inside'
									}
								},
								data: p,
								itemStyle: {
									// emphasis: {
									//   color: '#37a2da'
									// }
								}
							}
						]
					};
				});
		}
	}
};
</script>

<style>
.wrap {
	height: 100%;
	display: flex;
	flex-direction: column;
	padding: 10px 15px;
}
.container-wrap {
	height: 60%;
}
</style>
